<html>
<head>
	<title>DEMO str</title>
</head>
<body>
选项:
<label><input type="checkbox" onclick="changePinyinSetting(this)">匹配拼音</label>
<label><input id="setting_py" type="checkbox" onclick="changePySetting(this)" checked disabled>匹配简拼</label>
<label><input id="setting_py_fuzzy" type="checkbox" onclick="changePyFuzzySetting(this)" disabled>匹配模糊拼音</label>
<label><input type="checkbox" onclick="changeCaseSetting(this)">忽略大小写(对正则无效)</label>
<br>
<input type="text" oninput="search(this)" id="search" placeholder="键入搜索"><button onclick="search(this.previousElementSibling)">搜索</button><span id="matched"></span>
<pre id="content">
	javascript 锁定
	本词条由“科普中国”科学百科词条编写与应用工作项目 审核 。
	JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，
	广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
	在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，
	因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。 [1]
	为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。
	外文名 JavaScript 发行时间 1992年 设计者Brendan Eich 实现者Netscape、Mozilla基金会 编程范型脚本语言、基于原型的面向对象 形态系统 动态类型 发源地 美国
	目录
	1 组成部分
	2 基本特点
	3 日常用途
	4 历史
	5 特性
	6 编程
	7 版本
	8 比较
	组成部分
	ECMAScript，描述了该语
	javascript组成
	javascript组成
	言的语法和基本对象。 [2]
	文档对象模型（DOM），描述处理网页内容的方法和接口。 [2]
	浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。 [2]
	基本特点
	JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。
	通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。 [3]
	是一种解释性脚本语言（代码不进行预编译）。 [4]
	主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。 [4]
	可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。 [4]
	跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
	Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。
	而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。 [5]
	日常用途  嵌入动态文本于HTML页面。 [4]对浏览器事件做出响应。 [4]
	读写HTML元素。 [4]在数据被提交到服务器之前验证数据。 [4]检测访客的浏览器信息。 [4]控制cookies，包括创建和修改等。 [4]基于Node.js技术进行服务器端编程。 [6]
	历史
	它最初由Netscape的Brendan Eich设计。JavaScript是甲骨文公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合，如服务器端编程。
	完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型，浏览器对象模型。 [7]
	Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，
	因此语法上有类似之处，一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。
	为了取得技术优势，微软推出了JScript来迎战JavaScript的脚本语言。为了互用性，Ecma国际（前身为欧洲计算机制造商协会）创建了ECMA-262标准（ECMAScript）。两者都属于ECMAScript的实现。
	尽管JavaScript作为给非程序人员的脚本语言，而非作为给程序人员的脚本语言来推广和宣传，但是JavaScript具有非常丰富的特性。 [8]
	发展初期，JavaScript的标准并未确定，同期有Netscape的JavaScript，微软的JScript和CEnvi的ScriptEase三足鼎立。1997年，在ECMA（欧洲计算机制造商协会）的协调下，
	由Netscape、Sun、微软、Borland组成的工作组确定统一标准：ECMA-262。
	特性
	JavaScript脚本语言具有以下特点:
	(1)脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。
	(2)基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。
	(3)简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。
	(4)动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。
	在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
	(5)跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支 持JavaScript脚本语言,
	目前JavaScript已被大多数的浏览器所支持。 [3]
	不同于服务器端脚本语言，例如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担，
	而与此同时也带来另一个问题：安全性。
	而随着服务器的强壮，虽然程序员更喜欢运行于服务端的脚本以保证安全，但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时，有些特殊功能（如AJAX）必须依赖Javascript在客户端进行支持。
	随着引擎如V8和框架如Node.js的发展，及其事件驱动及异步IO等特性，JavaScript逐渐被用来编写服务器端程序。
</pre>
<script type="text/javascript" src="JinkoSearchEngine.js"></script>
<script>
	var text = document.getElementById('content').innerHTML;
	var timer = null;
	var options = {
		hilight_matched: true,
		hilight_wrap_template: "<span style='background: yellow;' matched>${0}</span>"
	};
	var engine = new JinkoSearchEngine({}, options);
	
	function search(el) {
		clearTimeout(timer);
		
		timer = setTimeout(() => {
			console.log('search:', el.value);
			var result = engine.fuzzyMatch(el.value, text);
			result = result ? result : text;
			document.getElementById('content').innerHTML = result;
			console.log('over');
			
			document.getElementById('matched').innerHTML = "共 " + engine.getLastMatchedCount() + "个匹配项";
			
		}, 300);
	}
	
	function changeSetting() {
		engine.setOptions(options);
		console.log('setting:', engine.getOptions());
		search(document.getElementById('search'))
	}
	
	function changePinyinSetting(el) {
		options.pinyin = el.checked;
		
		if(el.checked) {
			document.getElementById('setting_py').removeAttribute('disabled');
			document.getElementById('setting_py_fuzzy').removeAttribute('disabled');
		} else {
			document.getElementById('setting_py').setAttribute('disabled', 'disabled');
			document.getElementById('setting_py_fuzzy').setAttribute('disabled', 'disabled');
		}
		
		changeSetting();
	}
	
	function changePySetting(el) {
		options.pinyin_logogram = el.checked;
		changeSetting();
	}
	
	function changePyFuzzySetting(el) {
		options.pinyin_fuzzy = el.checked;
		changeSetting();
	}
	
	function changeCaseSetting(el) {
		options.ignore_case = el.checked;
		changeSetting();
	}
</script>
</body>
</html>